<template>
  <div>
    <div class="container" @click="close">
      <div class="wrapper">
        <div class="swiper-container" ref="cur">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(carousel, index) in gallaryImgs"
              :key="index"
            >
              <img :src="carousel" style="width: 100%" />
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
export default {
  name: 'GallaryDetail',
  props: {
    gallaryImgs: Array
  },
  data() {
    return {}
  },

  mounted() {
    // eslint-disable-next-line no-unused-vars
    const mySwiper = new Swiper(this.$refs.cur, {
      // 元素。当Swiper的祖先元素变化时，例如window.resize，Swiper更新
      observeParents: true,
      observer: true,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        // 点击小球的时候也切换图片
        type: 'fraction'
      }

      // 如果需要前进后退按钮
    })
  },

  methods: {
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 99;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #000;
  .wrapper {
    width: 100%;
  }
}
.swiper-pagination {
  color: #fff;
}
</style>
